{include file="public/head"/}
<script language="javascript">
    $(document).ready(function () {
        //设置modal垂直居中,移动
        // modalSetting(".modal");
        // 页面选择操作
        $(".option-country").show();
        $(".option-province").hide();
        $(".option-city").hide();
        $(".option-town").hide();
        $("#tab-country").click(function () {
            $(".option-country").show();
            $(".option-province").hide();
            $(".option-city").hide();
            $(".option-town").hide();
        })
        $("#tab-province").click(function () {
            $(".option-country").hide();
            $(".option-province").show();
            $(".option-city").hide();
            $(".option-town").hide();
        })
        $("#tab-city").click(function () {
            $(".option-country").hide();
            $(".option-province").hide();
            $(".option-city").show();
            $(".option-town").hide();
        })
        $("#tab-town").click(function () {
            $(".option-country").hide();
            $(".option-province").hide();
            $(".option-city").hide();
            $(".option-town").show();
        })
    });
</script>
<div class="container-fluid">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="alert alert-dismissable alert-info" id="headeralert">
                <button type="button" class="close">×</button>
                <p></p>
            </div>
        </div>
    </div>


    <div class="ntDesktop">
        <div class="ntDesktop-head">{:strtoupper(lang('district_management'))}</div>

        <div class="row clearfix" style="padding-top:12px">
            <div class="col-md-6 column">
                <ul class="nav nav-tabs">
                    <li class="active">
                        <a href="#home" data-toggle="tab" id="tab-country"
                           @click.prevent="statuschange('country')">{:strtoupper(lang('country'))}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-province" @click.prevent="statuschange('provinces')">{:strtoupper(lang('state'))}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-city" @click.prevent="statuschange('city')">{:strtoupper(lang('city'))}</a>
                    </li>
                    <li>
                        <a href="#home" data-toggle="tab" id="tab-town" @click.prevent="statuschange('town')">{:strtoupper(lang('town_district'))}</a>
                    </li>
                </ul>
            </div>

            <div class="col-md-6 column text-right">
                <div>
                    {in name="110" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/prefecture/countryadd" class='btn btn-primary option-country' data-toggle="modal"
                       data-target="#country_editModal" stytle="margin-right:20px"><span
                            class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add_a_new_country'))}</a>
                    {/in}
                    {in name="112" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/prefecture/provincesadd" class='btn btn-primary option-province' data-toggle="modal"
                       data-target="#province_editModal" stytle="margin-right:20px"><span
                            class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add_a_new_province'))}</a>
                    {/in}
                    {in name="114" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/prefecture/cityadd" class='btn btn-primary option-city' data-toggle="modal"
                       data-target="#city_editModal" stytle="margin-right:20px"><span
                            class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add_a_new_city'))}</a>
                    {/in}
                    {in name="116" value="$Think.session.admin.auth_ids"}
                    <a href="/admin/prefecture/townadd" class='btn btn-primary option-town' data-toggle="modal"
                       data-target="#town_editModal" stytle="margin-right:20px"><span
                            class="glyphicon glyphicon-plus"></span> {:strtoupper(lang('add_a_new_town'))}</a>
                    {/in}
                </div>
            </div>
        </div>

        <div class="row clearfix option-country">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center">No.</th>
                        <th> {:strtoupper(lang('country'))}</th>
                        <th> {:strtoupper(lang('phone_area_code'))}</th>
                        <th> {:strtoupper(lang('code'))}</th>
                        <th>{:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td align="center">{{formatUnit(item.id,'ID')}}</td>
                        <td> {{item.name}}</td>
                        <td align="right"> {{item.tel}}</td>
                        <td> {{item.language_code}}</td>
                        <td class="text-right">
                            <div>
                                {in name="111" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/prefecture/countryedit?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal"
                                   data-target="#country_editModal"><span
                                        class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                                {/in}
                                {in name="118" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click.prevent="delarea(item.id,'country')"
                                   class='btn btn-sm btn-default'><span
                                        class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;"  v-if="list.length==0">
                            <td colspan="5" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>


        <div class="row clearfix option-province">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center">No.</th>
                        <th> {:strtoupper(lang('country'))}</th>
                        <th> {:strtoupper(lang('state'))}</th>

                        <th> {:strtoupper(lang('abbreviation'))}</th>
                        <th>{:strtoupper(lang('capital'))} </th>
                        <th> {:strtoupper(lang('phone_area_code'))}</th>
                        <th> {:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td align="center">{{formatUnit(item.id,'ID')}}</td>
                        <td> {{item.countryname}}</td>
                        <td> {{item.name}}</td>
                        <td> {{item.sn}}</td>
                        <td align="center"> {{item.capital}}</td>
                        <td align="right"> {{item.telnum}}</td>
                        <td class="text-right">
                            <div>
                                {in name="113" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/prefecture/provincesedit?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal"
                                   data-target="#province_editModal"><span
                                        class="glyphicon glyphicon-pencil"></span> {:strtoupper(lang('edit'))}</a>
                                {/in}

                                {in name="119" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click.prevent="delarea(item.id,'provinces')"
                                   class='btn btn-sm btn-default'><span
                                        class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;"  v-if="list.length==0">
                            <td colspan="7" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>


        <div class="row clearfix option-city">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center">No.</th>
                        <th> {:strtoupper(lang('country'))}</th>
                        <th> {:strtoupper(lang('state'))}</th>
                        <th> {:strtoupper(lang('city'))}</th>
                        <th> {:strtoupper(lang('provincial'))}</th>
                        <th> {:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td align="center">{{formatUnit(item.id,'ID')}}</td>
                        <td> {{item.countryname}}</td>
                        <td> {{item.provincesname}}</td>
                        <td> {{item.name}}</td>
                        <td align="center"> O</td>
                        <td class="text-right">
                            <div>
                                {in name="115" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/prefecture/cityedit?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#city_editModal"><span
                                        class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                                {/in}
                                {in name="120" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click.prevent="delarea(item.id,'city')"
                                   class='btn btn-sm btn-default'><span
                                        class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;"  v-if="list.length==0">
                            <td colspan="6" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                    </tbody>
                </table>
            <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>

        <div class="row clearfix option-town">
            <div class="col-md-12 column">
                <table class="table table-striped table-hover ntTable" v-cloak>
                    <thead>
                    <tr>
                        <th style="text-align:center">No.</th>
                        <th> {:strtoupper(lang('country'))}</th>
                        <th> {:strtoupper(lang('state'))}</th>
                        <th> {:strtoupper(lang('city'))}</th>
                        <th> {:strtoupper(lang('town_district'))}</th>
                        <th> {:strtoupper(lang('operate'))}</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr v-for="item in list" :key="item.id" v-if="list.length>0">
                        <td align="center">{{formatUnit(item.id,'ID')}}</td>
                        <td> {{item.countryname}}</td>
                        <td> {{item.provincesname}}</td>
                        <td> {{item.cityname}}</td>
                        <td> {{item.name}}</td>
                        <td class="text-right">
                            <div>
                                {in name="117" value="$Think.session.admin.auth_ids"}
                                <a :href="'/admin/prefecture/townedit?id='+item.id" class='btn btn-sm btn-primary'
                                   data-toggle="modal" data-target="#town_editModal"><span
                                        class="glyphicon glyphicon-pencil"></span>{:strtoupper(lang('edit'))}</a>
                                {/in}
                                {in name="121" value="$Think.session.admin.auth_ids"}
                                <a href="javascript:;" @click.prevent="delarea(item.id,'town')"
                                   class='btn btn-sm btn-default'><span
                                        class="glyphicon glyphicon-trash"></span>{:strtoupper(lang('delete'))}</a>
                                {/in}
                            </div>
                        </td>
                    </tr>
                    <tr style="text-align: center;"  v-if="list.length==0">
                            <td colspan="6" class="no_date">{:strtoupper(lang('no_data'))}</td>
                        </tr>
                    </tbody>
                </table>
                <nav aria-label="Page navigation" class="navbox" v-show="list.length!=0">
                    <ul class="pagination"></ul>
                </nav>
            </div>
        </div>


    </div>
</div>
<!-- InstanceBeginEditable name="EditModal" -->

<!--添加国家弹窗部分 开始-->
<div class="modal fade" id="country_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--添加省份弹窗部分 开始-->
<div class="modal fade" id="province_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--添加弹窗部分 开始-->
<div class="modal fade" id="city_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--添加乡镇区弹窗部分 开始-->
<div class="modal fade" id="town_editModal" tabindex="-1" role="dialog" aria-labelledby="ntModalLabel"
     aria-hidden="true"  data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog modal-lg">
        <div class="modal-content" style="width:1000px">

        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<!--弹窗部分 结束-->
{include file="public/foot"/}
<script>
    var table = new Vue({
        el: '.ntDesktop',
        data: {
            list: [],
            page: 1,
            pageSize: 30,
            status: 'country'
        },
        methods: {
            formatUnit:formatUnit,
            setPage(pageCurrent, pageSum) {
            //数据总条数
            var myPageCount = pageSum;
            //一页显示多少条
            var myPageSize = this.pageSize;
            //总页数
            var countindex = myPageCount % myPageSize > 0 ? (myPageCount / myPageSize) + 1 : (myPageCount / myPageSize);
            $.jqPaginator('.pagination', {
                totalPages: parseInt(countindex),
                //最多显示多少页
                visiblePages: 5,
                //默认显示第几页
                currentPage: pageCurrent,
                first: '<li class="first"><a href="javascript:;">'+langcon.page_home+'</a></li>',
                prev: '<li class="prev"><a href="javascript:;"><i class="arrow arrow2"></i>'+langcon.previous_page+'</a></li>',
                next: '<li class="next"><a href="javascript:;">'+langcon.next_page+'<i class="arrow arrow3"></i></a></li>',
                last: '<li class="last"><a href="javascript:;">'+langcon.last_page+'</a></li>',
                page: '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                all:'<li class="page"><a href="javascript:;">'+myPageCount+' / '+this.page+'PG , '+this.pageSize+' /PG</a></li>',
                onPageChange:(num, type)=>{
                    if (type == "change") {
                        this.page=num
                        this.getAllList()
                    }
                }
            });
        },
            //数据所有获取
            getAllList(){
                $('.loding').show()
                $.ajax({
                    url: "/admin/prefecture/Area",
                    type: 'post',
                    data: {
                        page: this.page,//分页
                        pageSize: this.pageSize,//条数
                        statusarea: this.status,
                    },
                    dataType: "json",
                    success: (result) => {
                        this.list = result.getarea;
                        if(result.size)
                        this.setPage(parseInt(this.page), result.size)
                        $('.loding').hide()
                    }
                })
            },
            delarea(id, delcode){
                if (delcode == 'country') {
                    //国家的删除
                    urldel = 'countrydel'
                } else if (delcode == 'provinces') {
                    //省份删除
                    urldel = 'proesdel'
                } else if (delcode == 'city') {
                    //城市删除
                    urldel = 'citydel'
                } else if (delcode == 'town') {
                    //城镇的删除
                    urldel = 'towndel'
                }
                $.ajax({
                    url: '/admin/prefecture/' + urldel,
                    type: 'post',
                    data: {
                        id: id,
                        act: urldel
                    },
                    dataType: 'json',
                    success:(res)=>{
                        change_mes_type('#headeralert',res.status)
                        $('#headeralert').show()
                        $('#headeralert p').html('*'+res.msg+'<br>')
                        if (res.status == 1) {
                              if (!(this.list.length - 1)) {
                                    if(this.page>1){
                                        this.page--
                                    }
                            }
                            this.getAllList()
                        } 
                    }
                });
            },
            statuschange(status){
                this.status = status;
                this.page=1
                this.getAllList();
            }
        },
        created(){
            this.getAllList();
            $('#country_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList();
                    localStorage.removeItem("model");
                }
            })
            $('#province_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList();
                    localStorage.removeItem("model");
                }
            })
            $('#city_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList();
                    localStorage.removeItem("model");
                }
            })
            $('#town_editModal').on('hide.bs.modal', () => {
                if(localStorage.getItem("model")){
                    this.getAllList();
                    localStorage.removeItem("model");
                }
            })
        }
    })
    //    //替换之前的模板
    $("#country_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    $("#province_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    $("#city_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
    $("#town_editModal").on("hidden.bs.modal", function () {
        $(this).removeData("bs.modal");
        $(".modal-content").children().remove();
    });
</script>
